
// REQUIRES: jquery


AOSWebPlayer = function ( config, container) {

    var interpreter = AOSWP_Interpreter(config, function (interpreter) {

        var view = AOSWP_View(interpreter.canvas());
        view.impl().css("margin-left", "auto");
        view.impl().css("margin-right", "auto");

        var $player_div = $(container);
        $player_div.append(view.impl());

        var $previous_button = $(document.createElement("div"));
        $previous_button.css("background-color", "green");
        $previous_button.css("padding", 8);
        $previous_button.css("float", "left");
        $previous_button.text("Previous");
        $previous_button.click(function () {
            interpreter.go_back();
            view.update();
        });

        var $next_button = $(document.createElement("div"));
        $next_button.css("background-color", "red");
        $next_button.css("padding", 8);
        $next_button.css("float", "right");
        $next_button.text("Next");
        $next_button.click(function () {
            interpreter.go_next();
            view.update();
        });


        var $control_div = $(document.createElement("div"));
        $control_div.css("margin-left", "auto");
        $control_div.css("margin-right", "auto");
        $control_div.append($previous_button);
        $control_div.append($next_button);
        $control_div.width(view.impl().width());

        $player_div.append($control_div);

        // this is to clear the divs states - hack hack hack hack
        var $clear_div = $(document.createElement("div"));
        $clear_div.css("clear", "both");
        $player_div.append($clear_div);

    });
    
    
    // return the object that allow controlling the player
    return interpreter;
}


